<template>
  <div class="tree-top" style="width:100%">
    <div class="name">{{ data.name }}</div>
    <div class="manager">{{ data.manager }}</div>
    <el-dropdown @command="commandEvent">
      <div class="options">
        操作<i class="el-icon-arrow-down el-icon--right icolor"></i>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <!-- 添加功能 
                1：实现el-dropdown的添加点击事件
                2：创建一个弹框组件
                3:在组织架构中使用弹框组件
                3：在el-dropdown点击事件中实现弹框显示
                   使用了bus传值处理
                4:完善弹框组件布局
                5：完成表单验证
                6：实现添加功能（定义调用处理添加事件）
                -->
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <!-- 
              编辑功能
              1:编辑点击事件
              2:打开新增组件弹框
              3:传入一个参数告诉新增组件当前是编辑(mode:'add/edit')
              4:传入编辑数据:
                 如果当前点击项数据完整包含编辑数据,我们就直接使用当前点击项数据
                 如果当前点击项的数据不完整(少了一些编辑字段),我们就调用接口获取完整 编辑项数据
              5:新增组件完成相应的表单验证等逻辑处理
                编辑部门名称:
                  新增的表单验证:前面我们写的新增表单验证,打开当前点击项的子集,它的名字不能和子集中有同名
                  编辑的表单验证:找出当前点击项的兄弟项,不能同名,且排除自己的名字
                      1:在编辑名字的表单验证中针对 编辑场景做出处理(区分新增与编辑)
                      2:找出兄弟项
                         原始列表数据
                         通过当前点击项的pid就能找出兄弟项
                         排除自己这一项(id不能相同)
                         筛选是否重名,针对是否重名做处理
                编辑部门编码处理:
                   新增:不能和其它任何部门同code
                   编辑:不能和其它任何部门同code,但是要排除自己的code
              6:定义编辑api
              7:导入,分场景调用
              8:标题处理
              9:其它小坑点处理
           -->

          <el-dropdown-item v-if="!isTop" command="edit"
            >查看部门</el-dropdown-item
          >
          <!-- 删除
          1:实现删除点击事件
          2:定义删除api
          3:当前组件导入删除api方法
            确定提示框
             在点击确定后调用删除api
             删除成功后提示一下
             刷新父级的组织架构 列表数据         
          
           -->
          <el-dropdown-item v-if="!isTop" command="del"
            >删除部门</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import { companyDepartmentDel } from '@/api/departments'
export default {
  props: ['data', 'isTop'],
  methods: {
    commandEvent (str) {
      switch (str) {
        case 'add':
          this.$bus.$emit('showAdd', true, this.data)
          break
        case 'del':
          // this.$confirm(内容,标题,{配制项:按钮名称,类型等等}).then(点击确定处理).catch(点击取消处理)
          this.$confirm(`您确定删除该部门:[${this.data.name}]吗?`, '提示', {
            type: 'warning'
          }).then(async () => {
            await companyDepartmentDel(this.data.id)
            this.$message.success('删除成功')
            // this.$parent:取父级(找包住它的组件标签,如果都是原生标签,就是相应的组件,如果有其它组件包着,说明那个组件就是它父级)组件的实例对象
            // this.$parent.getData() // 能不能刷新父级列表数据? 能打勾,不能打X
            this.$emit('getData')
          })
          break
        case 'edit':
          window.console.log('当前行数据:', this.data)
          this.$bus.$emit('showAdd', true, this.data, 'edit')
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tree-top {
  display: flex;
  align-items: center;
  .name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
  }
  .manager {
    width: 120px;
  }
}
</style>
